import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { actionCreators } from './store'

import {
  CartWrapper,
  Container,
  NavLi,
  CartContent,
  Settlement,
  OrderWrapper,
  PriceWrapper
} from './style'

import { Table, Button,Modal } from 'antd';

var QRCode = require('qrcode.react');
class Cart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectNum: 0,
      priceTotal: 0,
      lessonId: [],
      schoolId: []
    }
  }
  rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      let price = 0 
      let lessonId = []
      let schoolId = []
      selectedRows.map(item => {
        price += item.price
        lessonId.push(item.id)
        if(item.school) {
          schoolId.push(item.school.id)
        }
      })
      this.setState({
        selectNum: selectedRows.length,
        priceTotal: price,
        schoolId: schoolId,
        lessonId: lessonId
      })
    },
    getCheckboxProps: record => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };

  render() {
    const columns = [
      {
        title: "商品信息",
        dataIndex: 'image',
        render: image => <img style={{width: '160px',height: '92px', borderRadius: '5px'}} src={image} />
      },
      {
        title: "价格",
        dataIndex: 'price',
        className: 'td-middle'
      },
      {
        title: '操作',
        dataIndex: 'id',
        className: 'td-middle',
        render: (id,recored) => {
          return (
            <a onClick={(e) => (this.props.removeCart({lessonId: id}))}>删除</a>
          )
        }
      }
    ]
    return (
      <CartWrapper>
        <Container>
          <NavLi>
            <Link to="/">首页</Link>
            >购物车
          </NavLi>
          {
            this.props.list.length > 0 ? <CartContent>
            <Table style={{minHeight: (document.body.clientHeight - 386 + 'px')}} rowSelection={this.rowSelection} columns={columns} dataSource={this.props.list} pagination={false}/>
            <Settlement>
              <Button type="primary" onClick={()=> this.props.clearAll()}>
                清空购物车
              </Button>
              <OrderWrapper>
                <PriceWrapper>
                  <p>已选{this.state.selectNum}种商品 合计：</p>
                  <p className="price">￥{this.state.priceTotal}</p>
                </PriceWrapper>
                <Button type="primary" onClick={() => this.props.pay({lessonId: this.state.lessonId.join(','), schoolId: this.state.schoolId.join(',')})}>结算</Button>
              </OrderWrapper>
            </Settlement>
          </CartContent> : <div style={{display: 'flex', backgroundColor: '#fff', height: (document.body.clientHeight - 306 + 'px'), justifyContent: 'center', alignItems: 'center'}}><img src={require('./img/cart_empty.png')}/></div>
          }
        </Container>
        <Modal
          visible={this.props.payType}
          onCancel={() =>this.props.changeModal(false)}
          footer={null}
        >
          <div style={{height: '260px',width: '90%',margin: '0 auto', paddingTop: '10px'}}>
            <p style={{textAlign: 'center',marginBottom: '20px', fontSize: '16px'}}>请扫码付款：￥{ this.state.priceTotal }</p>
            <div style={{border: '1px solid #03A0EB',float: 'left',marginLeft: '30px', width: '40%', textAlign: 'center',paddingTop: '10px'}}>
              <QRCode value={this.props.payResult.get('aliPay')}/>
              <p style={{background: '#03A0EB', color: '#fff', marginTop: '10px'}}>支付宝</p>
            </div>
            <div style={{border: '1px solid #86C70C', marginLeft: '30px',float: 'left', width: '40%', textAlign: 'center',paddingTop: '10px'}}>
              <QRCode value={this.props.payResult.get('wechatPay')}/>
              <p style={{background: '#86C70C', color: '#fff', marginTop: '10px'}}>微信</p>
            </div>
          </div>
          <p style={{textAlign: 'center'}}>请选择支付方式扫码付款</p>
        </Modal>
      </CartWrapper>
    )
  }
}


const mapState = (state) => {
  return {
    list: state.getIn(['header', 'cartList', 'list']).toJS(),
    payType: state.getIn(['cart', 'payType']),
    payResult: state.getIn(['cart', 'payResult'])
  }
}

const mapDispatch = (dispatch) => ({
  removeCart(params) {
    dispatch(actionCreators.removeCart(params))
  },
  pay(params) {
    dispatch(actionCreators.pay(params))
  },
  changeModal(params) {
    dispatch(actionCreators.changeModal(params))
  },
  clearAll() {
    dispatch(actionCreators.clearAll())
  }
})

export default connect(mapState, mapDispatch)(Cart)